<template>
    <el-container>
        <el-header class="header">
            <h1 class="ttt">新疆维吾尔自治区民政养老服务管理系统</h1>
        </el-header>
        <el-main class="mainnnn">
            <div class="loginleft">
                <img :src="imgSrc" class="imgloginleft"/>
                <div>
                    <el-form :model="into" :rules="rules" ref="into" class="logcon" label-position="left" label-width="auto">
                        <el-form-item prop="userCode">
                            <el-input prefix-icon="el-icon-user" type="text" v-model="into.userCode" auto-complete="off" placeholder="用户名"/>
                        </el-form-item>
                        <el-form-item prop="userPassword">
                            <el-input prefix-icon="el-icon-unlock" type="text" v-model="into.userPassword" auto-complete="off" placeholder="密码" show-password/>
                        </el-form-item>
                        <el-form-item style="width:100%">
                            <el-button type="primary" style="width:30%;background:#505458;border:none" @click="submitForm('into')">确定</el-button>
                            <el-button type="primary" style="width:30%;background:#505458;border:none" @click="resetForm('into')">取消</el-button>
                        </el-form-item>
                    </el-form>
                    <el-dialog
                    title="温馨提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    >
                    <span>账号或密码错误，请重新输入！</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </div>
        </el-main>
        <el-footer class="footer">河北中科恒运软件科技股份有限公司</el-footer>
    </el-container>
</template>

<script>
import backImg from "@/assets/image/logleft.png";
import axios from 'axios'
// import jwtDecode from 'jwt-decode'
export default{
    data(){
        return{
            into:{
                userCode:'',
                userPassword:'',
            },
            rules:{
                userCode:[
                    {required:true,message:'请输入用户账号',trigger:'blur'}
                ],
                userPassword:[
                    {required: true,message:'请输入用户密码',trigger:'blur'}
                ]
            },
            // 对话框显示和隐藏
            dialogVisible: false,
            yanzheng:'',
            checkCode:'',
            picLyanzhengma:'',
            imgSrc:backImg,
        }
    },
    created(){//测试
        this.createdCode();
    },
    methods:{
        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    let param={
                        userCode:this.into.userCode,
                        userPassword:this.$md5(this.into.userPassword,'a1b2c3defg'),//密码加密/盐值
                    }
                    axios.post("/chain-api/userlogin/login",param).then(
                        res=>{
                            // console.log(res);
                            if(res.data.data.user){
                                this.$router.push('/main/welcome');//要跳转的页面
                                this.$store.commit("SET_LOGIN_USER_INFO",res.data.data.user);
                            }else{
                                this.dialogVisible=true;
                            }
                        }
                    )
                }
            });
        },
        resetForm(formName){
            this.$refs[formName].resetFields();
        },
        // 验证码
        createdCode(){
            this.yanzheng="";
            this.checkCode= "";
            this.picLyanzhengma="";
            const codeLength=4;
            const random=new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z')
            for(let i=0;i<codeLength;i++){
                let index=Math.floor(Math.random()*36)
                this.yanzheng+=random[index];
            }
            this.checkCode=this.yanzheng;
            console.log(this.yanzheng);
        }
    }
}
</script>
<style scoped>
    html,body,#app,.el-container{
        margin:0px;
        padding:0px;
    }
    .mainnnn{
        width:100%;
        height:100vh;
        background:url('../assets/image/ccc.png') no-repeat center center;
        background-size:cover;
        /* 背景图片固定不随滚动条滚动 */
        background-attachment:fixed;
    }
    .header{
        background-color:#B3C0D1;
        color:#333;
        text-align:center;
        line-height:60px;
    }
    .footer{
        background-color:#B3C0D1;
        color:#333;
        text-align:center;
        line-height:60px;
    }
    .ttt{
        margin:0px auto 35px auto;
        text-align:center;
        color:#505458;
    }
    .imgloginleft{
        width:500px;
        height:250px;
        text-align:left;
        top:30%;
        left:160px;
        position:absolute;
    }
    .logcon{
        width:290px;
        height:177px;
        border:18px solid rgba(220,219,219,0.3);
        padding:35px 35px 15px 35px;
        background:rgba(145,144,144,0.7);
        border-radius:15px;
        box-shadow:0 0 25px #cac6c6;
        /* z-index:1; */
        top:30%;
        left:750px;
        position:absolute;
    }
    .vvv{
        border-radius: 12px;
        width: 100px;
        letter-spacing: 5px;
        /* margin-left: 50px; */
        height:40px;
        transform:translate(16px,0);
    }
</style>